<template>
  <view class="order_goods_info_com">
    <view class="goods_box" v-for="item in goodsList" :key="item.id">
      <view
        class="goods_item"
        @click="navSwitch('/pages/productDetails/index?id=' + item.goodsId)"
      >
        <image :src="item.goodsPicUrl" class="goods_img"></image>
        <view class="item_info">
          <view class="info">
            <view>
              <view class="name u-line-2">
                {{ item.commonName }}
              </view>
              <view class="goods_specs u-line-1">
                <!-- <view class="unit"
                >{{ $t('locales.unitPrice') }}：{{ item.priceBig }}</view
              > -->
                <!-- <view class="specs"
                >{{ $t('locales.specifications') }}：{{
                  item.specifications
                }}</view
              > -->
              </view>
            </view>
            <!-- <view class="goods_price"
              >{{ $t('locales.unitPrice') }}：{{ $store.getters.currency
              }}{{ item.paymentPriceBig }}</view
            > -->
          </view>
          <!-- <view class="goods_num">x{{ item.count || item.num }}</view> -->
        </view>
      </view>
      <!-- 上传资质 -->
      <view
        class="goods_qualifications"
        v-if="item.qualificationRequired === 1"
      >
        <view class="title"
          ><text style="color: #f13030">*</text>{{ $t('locales.upload') }}
          {{ item.qualificationName }} {{ $t('locales.certificate') }}</view
        >
        <u-upload
          :show-progress="false"
          :index="item.goodsId"
          custom-btn
          width="120"
          height="120"
          max-count="3"
          :max-size="3145728"
          :action="baseUrls + '/file/upload'"
          del-bg-color="#999"
          @on-uploaded="uploadSuccess"
          @on-remove="uploadRemove"
          @on-choose-complete="uploadComplete"
          @on-error="uploadError"
          @on-oversize="oversize"
        >
          <view slot="addBtn" class="addBtn">
            <u-icon name="plus" color="#ccc" size="40"></u-icon>
          </view>
        </u-upload>
        <view class="info_item">
          <view class="name">{{ $t('locales.qualificationRemarks') }}</view>
          <view class="val"
            ><u-input
              maxlength="100"
              v-model="item.OrderGoodsQualificationsDTO.remarks"
              height="40"
              :placeholder="$t('locales.optional')"
              @blur="inputBlur"
          /></view>
        </view>
      </view>
      <!-- 展示资质 -->
      <view class="goods_qualifications" v-if="item.isGoodsQualification === 1">
        <view class="title"
          ><text style="color: #f13030">*</text>{{ $t('locales.upload') }}
          {{ item.qualificationName }} {{ $t('locales.certificate') }}</view
        >
        <img
          class="view_img"
          v-for="(img, i) in item.qualificationsList"
          :key="img.id"
          :src="img.qualificationsPictureUrl"
          @click="exhibitionImg(item.qualificationsList, i)"
        />
        <view class="info_item">
          <view class="name">{{ $t('locales.qualificationRemarks') }}</view>
          <view class="val">
            {{ item.qualificationsList[0].remarks }}
          </view>
        </view>
      </view>

      <view class="goods-format__container">
        <view
          v-for="skuItem in item.skuList"
          :key="skuItem.skuId"
          class="goods-format__item"
        >
          <view class="detail">
            <view class="detail__text">
              <view class="format">
                <text class="grey">{{ $t('locales.skuFormat') }}1：</text>
                {{ skuItem.mainSpec }}
              </view>
              
              <view v-if="skuItem.otherSpec" class="format">
                <text class="grey">{{ $t('locales.skuFormat') }}2：</text>
                {{ skuItem.otherSpec }}
              </view>
            </view>

            <view class="detail__text">
              {{$store.getters.currency}} {{ skuItem.subtotal }}
            </view>
          </view>

          <view class="detail">
            <view class="detail__text">
              <text class="grey">{{ $t('locales.unitPrice') }}：</text>
              {{$store.getters.currency}} {{ skuItem.priceD }}
            </view>

            <view class="detail__text">
              {{ skuItem.count }} {{ item.goodsUnit }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { baseUrl } from '@/config'
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      baseUrls: baseUrl(),
      goodsList: []
    }
  },
  
  watch: {
    value: {
      deep: true,
      handler() {
        this.initData(this.value)
      }
    }
  },

  created() {
    this.initData(this.value)
  },
  methods: {
    initData(val) {
      console.log(val)
      const list = this.$u.deepClone(val)
      list.map((item) => {
        if (item.qualificationRequired === 1) {
          item.OrderGoodsQualificationsDTO = {
            goodsId: item.goodsId,
            pictureList: [],
            remarks: ''
          }
        }
      })
      this.goodsList = list
      this.$store.commit('SET_ORDER_PREVIEW_GOODS_LIST', this.goodsList)
    },
    navSwitch(url) {
      uni.navigateTo({
        url
      })
    },
    // 图片选择完成
    uploadComplete(lists, name) {
      uni.showLoading({
        mask: true
      })
    },
    // 图片上传完成
    uploadSuccess(fileList, goodsId) {
      const imglist = []
      fileList.map((item) => {
        if (item.response) {
          imglist.push(item.response.data.objectName)
        }
      })
      this.goodsList.map((item) => {
        if (item.goodsId === goodsId) {
          item.OrderGoodsQualificationsDTO.pictureList = imglist
        }
      })
      this.$store.commit('SET_ORDER_PREVIEW_GOODS_LIST', this.goodsList)
      uni.hideLoading()
    },
    // 图片上传失败
    uploadError() {
      uni.hideLoading()
    },
    // 超出大小
    oversize() {
      uni.showModal({
        content: this.$t('locales.overstep'),
        confirmColor: '#0049AC',
        showCancel: false
      })
    },
    // 移除图片
    uploadRemove(index, fileList, goodsId) {
      console.log(fileList)
      const imglist = []
      fileList.map((item) => {
        if (item.response) {
          imglist.push(item.response.data.objectName)
        }
      })
      this.goodsList.map((item) => {
        if (item.goodsId === goodsId) {
          item.OrderGoodsQualificationsDTO.pictureList = imglist
        }
      })
      this.$store.commit('SET_ORDER_PREVIEW_GOODS_LIST', this.goodsList)
    },
    inputBlur() {
      this.$store.commit('SET_ORDER_PREVIEW_GOODS_LIST', this.goodsList)
    },
    exhibitionImg(urls, index) {
      const list = urls.map((item) => item.qualificationsPictureUrl)
      uni.previewImage({
        current: index,
        urls: list
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order_goods_info_com {
  background-color: #fff;
  // padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  // .goods_item:last-child {
  //   border-bottom: 0;
  // }
  .goods_box {
    padding: 24rpx 20rpx 24rpx;
    border-bottom: 1rpx solid #EEEEEE;

    .goods_item {
      // padding: 20rpx 0;
      padding-bottom: 20rpx;
      // border-bottom: 1px solid #eee;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      .goods_img {
        width: 170rpx;
        height: 170rpx;
        display: block;
        border-radius: 10rpx;
      }
      .item_info {
        flex: 1;
        margin-left: 20rpx;
        display: flex;
        .info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 15rpx 0;
          .name {
            width: 420rpx;
            font-size: 30rpx;
            font-weight: 500;
          }
          .goods_specs {
            color: #8a8ba1;
            display: flex;
            margin-top: 10rpx;
            font-size: 24rpx;
            width: 420rpx;
            .unit {
              margin-right: 20rpx;
            }
          }
          .goods_price {
            color: #ff1010;
            font-weight: bold;
            font-size: 24rpx;
          }
        }
      }
      .goods_num {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20rpx;
      }
    }
    .goods_qualifications {
      .title {
        padding: 20rpx 20rpx;
      }
      .addBtn {
        margin: 10rpx;
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        border: 1px solid #eee;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .view_img {
        margin: 10rpx;
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        border: 1px solid #eee;
      }
      .info_item {
        display: flex;
        min-height: 80rpx;
        padding: 20rpx 20rpx;
        border-bottom: 1px solid #eee;
        .name {
          width: 180rpx;
        }
        .val {
          width: 430rpx;
          text-align: right;
          flex: 1;
        }
      }
    }
  }
}

.goods-format__container {
  padding: 32rpx 21rpx;
  border-radius: 8rpx;
  background: #F7F8FA;

  .goods-format__item {
    margin-bottom: 41rpx;

    &:last-child {
      margin-bottom: 0;
    }
    .detail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #333;

      &:last-child {
        margin-bottom: 0;
      }

      .grey {
        color: #999999;
      }
    }
  }
}
</style>
